function GetEle(selector){
    this.eles = document.querySelectorAll(selector)
}

GetEle.prototype.html = function(text){
    if(arguments.length>= 1){   // 有参数 
        for(var i=0;i<this.eles.length;i++){
            var ele = this.eles[i];
            ele.innerHTML = text;
        }
        return this;
    }else{
        // 没有传参数  
        return this.eles[0].innerHTML;
    }
}
GetEle.prototype.text = function(arg){
    if(arguments.length>= 1){   // 有参数 
        for(var i=0;i<this.eles.length;i++){
            var ele = this.eles[i];
            ele.textContent = arg;
        }
        return this;
    }else{
        // 没有传参数  
        return this.eles[0].textContent;
    }
}
GetEle.prototype.val = function(value){
    if(arguments.length>= 1){   // 有参数 
        for(var i=0;i<this.eles.length;i++){
            var ele = this.eles[i];
            ele.value = value;
        }
        return this;
    }else{
        // 没有传参数  
        return this.eles[0].value 
    }
}
GetEle.prototype.hide = function(){
    // this ==> GetEle => 实例化的对象 
    for(var i=0;i<this.eles.length;i++){
        var ele = this.eles[i];
        ele.style.display = 'none';
    }
    return this;
}
GetEle.prototype.show = function(){
    // this ==> GetEle => 实例化的对象 
    for(var i=0;i<this.eles.length;i++){
        var ele = this.eles[i];
        ele.style.display = 'block';
    }
    return this;
}

// 循环实例化对象中的集合 this.eles  每次循环时候传入 回调函数 
GetEle.prototype.each = function(fn){  // fn 传入一个函数 
    for(var i=0;i<this.eles.length;i++){
        var item = this.eles[i];
        var index = i;
        // fn.call();
        // fn(item,index);

        // fn.call(this,arg1,arg2,arg3)  call 改变this的指向 
        fn.call(this,item,index,this.eles);

        // fn.call(this,index,item,this.eles);
        // 注意  jquery each 第一个参数是下表 第二个才是当前循环的元素

    }
    return this;
}

GetEle.prototype.click = function(fn){
    // for(var i=0;i<this.eles.length;i++){
    //     var ele = this.eles[i];
    //     ele.addEventListener("click",fn);  // DOM2          DOM0 
    // }
    // this.each((ele,index)=>{
    //     ele.addEventListener("click",fn);
    // })
    this.on("click",fn);
    return this;
}

GetEle.prototype.on = function(eventType,fn){
    this.each(ele=>{
        if(ele.addEventListener){   
            // 普通正常的浏览器 
            ele.addEventListener(eventType,fn)
        }else{
            ele.attachEvent('on'+eventType,fn)   // IE 
        }
    })
    return this;
}

// width()
// width()  获取元素的宽度
// width(200px) 设置元素的宽度 
GetEle.prototype.width = function(arg){
    if(arguments.length>= 1){
        this.each(ele=>{
            // 200px px  pt(物理像素) em rem vw vh  %  有单位的就直接拼接 
            // 200  没有单位      默认px 
            var unitReg = /^\d+(px|pt|vw|vh|rem|%|em)$/
            if(unitReg.test(arg)){
                ele.style.width = arg;
            }else{
                ele.style.width = arg + "px";
            }
        })
        return this;
    }else{
        // 返回宽度值
        // return this.eles[0].style.width;

        // 默认返回第一个 
        // return parseFloat(getStyle(this.eles[0],'width'))
        return parseFloat(this.getStyle("width"))
    }
}


GetEle.prototype.height = function(arg){
    if(arguments.length>= 1){
        this.each(ele=>{
            // 200px px  pt(物理像素) em rem vw vh  %  有单位的就直接拼接 
            // 200  没有单位      默认px 
            var unitReg = /^\d+(px|pt|vw|vh|rem|%|em)$/
            if(unitReg.test(arg)){
                ele.style.height = arg;
            }else{
                ele.style.height = arg + "px";
            }
        })
        return this;
    }else{
        // 默认返回第一个 
        return parseFloat(this.getStyle("height"))
    }
}

GetEle.prototype.getStyle = function(attr){
    var ele  = this.eles[0]  // 默认返回第一个
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}

// css()   获取或者设置某个css
// css("color");  获取字体颜色
// css("color",'red') 设置字体颜色 

// css("color")   获取
// css({color:'red',fontSize:'16px'})  同时 设置 多个样式   
GetEle.prototype.css =  function(key,value){
    if(arguments.length>= 2){
        // 设置字体颜色 
        this.each(ele=>{
            // ele.style.width = value;
            ele.style[key] = value ;
        })
        return this; // 把实例话对象返回 
    }else if(arguments.length==1){
        // 获取css
        // 判断是不是对象 
        if(Object.prototype.toString.call(key)==='[object Object]'){    
            // {color:'red',fontSize:'16px',float:'left',width:'200px'}
            // key 是一个对象 
            for(var name in key){
                console.log(name)
                // this.each(ele=>{
                //     ele.style[name] = key[name] ;
                // })
                this.css(name,key[name]);   // 递归自调用 
            }
            return this;
        }else{
            return this.getStyle(key);
        }
    }
}

// style行内样式 

// 非行内样式 css
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}

// getAttribute  获取属性
// setAttribute  设置属性 
// attr 
// attr(key,val)  // 设置  setAttribute(Key,val)
// attr(key)   获取  getAttribute(key)
GetEle.prototype.attr=function(key,val ){
    if(arguments.length>= 2){
        this.each(ele=>{
            ele.setAttribute(key,val)
        })
        return this;
    }else if(arguments.length==1){
        return this.eles[0].getAttribute(key)
    }
}

// prop  
// prop 获取或者设置当前元素节点的属性  ele.innerHTML ele.classList 
// prop(key,val)
// prop('className','one')    ele.className = "one"

// prop(key)   一个参数就直接获取值
// prop("className")
// prop('checked')
// prop("checked",false)

GetEle.prototype.prop =function(key,val ){
    if(arguments.length>= 2){
        this.each(ele=>{
            ele[key] = val;
        })
        return this;
    }else if(arguments.length==1){
        return this.eles[0][key]
    }
}

// 添加class 
GetEle.prototype.addClass = function(){   // 参数的个数不确定
    var arg = arguments;  // 数组 
    console.log(arg)
    this.each(ele=>{
        ele.classList.add(...arg); // 数组展开 
    })
    return this;
}

GetEle.prototype.removeClass = function(){
    var arg = arguments;  // 数组 
    this.each(ele=>{
        ele.classList.remove(...arg); // 数组展开 
    })
    return this;
}

// 链式操作  方法的返回值 依然是一个实例化对象  (对应的构造函数)   return this 为了链式操作 
// var p = new Promise(())
// p.then().then().then().then().catch().finally
// str.replace().replace().replace()

// eq  
// eq(1)  
// $(".list li").eq(1).css().height()
GetEle.prototype.eq = function(index){
    var ele = this.eles[index];      // 通过下表获取对应的元素 
    this.eles = [ele];     //  把获取到的元素重新的放到一个集合   单个元素也要放到一个集合里面去  
    return this;    
}

GetEle.prototype.first = function(){
    var ele = this.eles[0];      // 通过下表获取对应的元素 
    this.eles = [ele];     //  把获取到的元素重新的放到一个集合   单个元素也要放到一个集合里面去  
    return this;    
}

GetEle.prototype.last = function(){
    var ele = this.eles[this.eles.length-1];      // 通过下表获取对应的元素 
    this.eles = [ele];     //  把获取到的元素重新的放到一个集合   单个元素也要放到一个集合里面去  
    return this;    
}
// siblings 兄弟节点 返回的是 被选中元素的 以外的所有的兄弟同级元素 (返回新的实例化对象)
// $(".list li").eq(1).siblings().css().height()
GetEle.prototype.siblings = function(){ 
    var ele = this.eles[0];
    var parentEle = ele.parentElement; // 父亲节点
    var children = parentEle.children;  // 子元素   伪数组

    var nodes = Array.from(children).filter(item=>item!=ele);    // 当前元素的兄弟节点  
    this.eles = nodes; 
    return this;
}


// 对 GetEle 二次封装  模仿jquery 快速创建一个实例化对象  
function $(selector){
    return new GetEle(selector)
}
// hide show 
// $(".list li")  ==> 实例化对象 

// $(".list li").html('zkl-zkl')
// $(".inp").val("hello - hello - wuhan")